<template>
  <view>
    <sk-container v-if="form.Article_Name == undefined">
      <view class="guj" style="height: calc(100vh)">
        <sk-waterfall waterfall length:30></sk-waterfall>
      </view>
    </sk-container>
    <view class="content" v-else>
      <swiper circular class="swiper-box" autoplay :interval="3000">
        <swiper-item
          v-for="(item, index) in Swiper"
          :key="index"
          class="flex justify-center"
        >
          <image
            v-if="Swiper.length != 0"
            :src="Domain_IMG + item.Picture_URL"
            mode=""
            style="width: 96%; border-radius: 25rpx"
            class=""
          >
          </image>
        </swiper-item>
      </swiper>
      <view class="cont">
        <view class="item">
          <view class="name">
            <text class="text1">￥</text>
            <text class="text2">{{ Number(form.Amount).toFixed(2) }}元</text>
          </view>
          <view class="sangname">{{ form.Article_Name }}</view>
          <view class="foot">
            <view>已浏览{{ Browsing }}次</view>
            <view class="guig"
              >已售出{{form.Sell_Quantity}}{{ form.Unit }}</view
            >
          </view>
        </view>
        <view class="item">
          <view class="way my-2 flex">
            <text class="text text-success">装运方式:</text>
            <view
              class="text"
              v-for="(item, index) in Transport"
              :key="index"
              >{{ item.Transport_Name }}</view
            >
          </view>
          <view class="way my-2 flex">
            <text class="text text-success">支付方式:</text>
            <view class="text" v-for="(item, index) in Payment" :key="index">{{
              item.Payment_Name
            }}</view>
          </view>
          <view class="way my-2 flex">
            <text class="text text-success">交易方式:</text>
            <view
              class="text"
              v-for="(item, index) in Paystages"
              :key="index"
              >{{ item.Trading_Explain }}</view
            >
          </view>
        </view>
        <view class="item">
          <view class="specifications">
            <view class="text-success my-2"> 规格 </view>
            <view> 默认 </view>
            <view> {{ form.Amount }}元/{{ form.Unit }} </view>
            <view> {{ form.Starting_Quantity }}{{ form.Unit }}起批 </view>
          </view>
        </view>
        <view class="company">
          <view class="header">
            <view class="left">
              <!--    -->
              <image
                v-if="form.Enterprise_Logo != undefined"
                class="rounded-circle"
                style="width: 100%; height: 100%"
                :src="Domain_Business + form.Enterprise_Logo"
                mode=""
              >
              </image>
            </view>
            <view class="right">
              <view class="title">{{ form.Enterprise_Name }}</view>
            </view>
          </view>
          <view class="cont">
            <button
              size="mini"
              @click="
                go(
                  '/pages/My/Customer_service/Customer_service?name=' +
                    form.Enterprise_Name +
                    '&Enterprise_Info_SerialNumber=' +
                    form.Enterprise_Info_SerialNumber
                )
              "
            >
              联系对方
            </button>
            <button
              size="mini"
              @click="go('/pages/index/Traceabilityservices')"
            >
              溯源查看
            </button>
          </view>
        </view>
        <view class="item" v-if="Detail != 0">
          <view class="xiangq">
            <view class="I mr-2"></view>
            商品详情
            <view class="I ml-2"> </view>
          </view>
          <view class="cont">
            <view
              class="flex flex-column mx-10 py-4 w-100"
              style="height: 100%"
            >
              <view
                v-for="item in Detail"
                :key="item.Article_PicNumber"
                style="width: 100%"
              >
                <image
                  v-if="item.Picture_URL != undefined"
                  style="width: 100%"
                  :src="Domain_IMG + item.Picture_URL"
                  mode="widthFix"
                >
                </image>
              </view>
            </view>
          </view>
        </view>
        <!-- 交易说明 -->
        <view class="item footer">
          <view class="xiangq">
            <view class="I mr-2"></view>
            交易说明
            <view class="I ml-2"> </view>
          </view>
          <view class="item">
            <TransactionDescription></TransactionDescription>
          </view>
        </view>
        <!-- 立即购买 -->
        <view class="button">
          <button
            class="btn"
            v-if="
              form.Enterprise_Info_SerialNumber !=
              Enterprise_Info_SerialNumber
            "
            @click="
              handleTabs(
                '/pages/Market/MarketOrder?Group_Seek_Purchase_SerialNumber=' +
                  Group_Purchasing_SerialNumber
              )
            "
          >
            立即购买
          </button>
          <button class="btn" v-else>本企发布</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import TransactionDescription from "@/components/TransactionDescription.vue";
import Tradingchat from "@/components/Tradingchat2/Tradingchat.vue";
import { GroupProcureID, GroupServesHistory } from "@/api/group.js";
import { GoodsFileAdd, getAddAction } from "@/api/global.js";
import times from "@/static/js/utils.js";
export default {
  name: "MarketDetail",
  data() {
    return {
      Domain_Business: app.globalData.Domain_Business,
      token: "",
      Group_Purchasing_SerialNumber: "",
      Domain_IMG: app.globalData.Domain_IMG,
      show: false,
      hide: false,
      Enterprise_Info_SerialNumber: "",
      form: {},
      Data: {},
      Detail: [],
      Swiper: [],
      Payment: [],
      Shipment: [],
      Transport: [], //运输方式
      Paystages: [], //交易方式
      Browsing: "", //浏览次数
      num: 0,
      min: 0,
      max: 0,
      Quantity: 0,
      Whether: true,
      BrowseHistory: {
        Group_Browse_SerialNumber: "",
        Group_SerialNumber: "",
        Group_Browse_Path: "",
        Group_Type: "1",
        Group_Browse_Date: times.nowtime(),
        User_Number: "",
      },
    };
  },
  components: {
    Tradingchat,
    TransactionDescription,
  },

  onLoad(e) {
    this.Enterprise_Info_SerialNumber = uni.getStorageSync("enterprise");

    this.Group_Purchasing_SerialNumber = e.Group_Purchasing_SerialNumber;

    console.log(e.Group_Purchasing_SerialNumber);

    let token = uni.getStorageSync("token");

    this.getData(this.Group_Purchasing_SerialNumber);

    this.BrowseHistory.User_Number = uni.getStorageSync("use");

    this.BrowseHistory.Group_SerialNumber = e.Group_Purchasing_SerialNumber;
    //获取路径
    let pages = getCurrentPages();

    let currentPage = pages[pages.length - 1];

    this.BrowseHistory.Group_Browse_Path = currentPage.route;

    this.getAddHistory();
  },
  methods: {
    async getAddHistory() {
      let data = {
        Data: JSON.stringify({
          group_browsing_info: [this.BrowseHistory],
        }),
      };
      const res = await getAddAction({
        data,
      });
      console.log(res);
    },
    go(url) {
      uni.navigateTo({
        url,
      });
    },

    async getData(Group_Purchasing_SerialNumber) {
      const res = await GroupProcureID({
        data: {
          Group_Purchasing_SerialNumber,
        },
      });
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        (res.REDIRECT && res.REDIRECT == "REDIRECT")
      ) {
        uni.showModal({
          title: "登录已失活",
          content: "系统检测到您未登录或登录超时",
          cancelText: "暂不登录",
          confirmText: "去登陆",
          success(res) {
            if (res.cancel) {
              uni.switchTab({
                url: "/pages/index/index",
              });
            }
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/My/Login?LoginUrl=" + this.LoginUrl,
              });
            }
          },
        });
        return;
      } else if (res.Status == "success") {
        this.form = res.Data;
        console.log(this.form);
        this.Data = res;
        if (
          parseInt(res.Data.Starting_Quantity) <
          parseInt(res.Data.Residue_Quantity)
        ) {
          this.Quantity = res.Data.Starting_Quantity;
        } else {
          this.Quantity = res.Data.Residue_Quantity;
        }
        if (res.Swiper.length == 0) {
          this.Swiper.push(res.Data.Picture_URL);
        } else {
          this.Swiper = res.Swiper;
        }
        this.Detail = res.Detail;
        this.Payment = res.Payment;
        this.Shipment = res.Shipment;
        this.Transport = res.Transport;
        this.Paystages = res.Paystages;
        this.Browsing = res.Browsing;
        console.log(res);
      }
    },
    //商品购买校验
    handleTabs(url) {
      if (uni.getStorageSync("token") == "") {
        uni.showModal({
          title: "平台通知",
          content: "你还没有登录,是否前往登录",
          cancelText: "我再想想",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/My/Login",
              });
            }
          },
        });
        return;
      }
      const authentication = uni.getStorageSync("authentication");

      if (authentication != "") {
        uni.navigateTo({
          url:
            "/pages/Market/MarketOrder?Goods=" +
            encodeURIComponent(JSON.stringify(this.form)) +
            "&num=" +
            this.Quantity +
            "&data=" +
            encodeURIComponent(JSON.stringify(this.Data)),
        });
      } else {
        uni.showModal({
          title: "平台通知",
          content: "你还没有认证,是否前往认证",
          cancelText: "我再想想",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/My/Certificate_services",
              });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 1px;

  .swiper-box {
    height: 240px;
  }

  .item {
    background: #fff;
    margin: 20rpx 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;

    .name {
      color: #ff442f;

      .text1 {
        font-size: 26rpx;
        letter-spacing: 0;
        font-weight: 500;
        padding-bottom: 8rpx;
      }

      .text2 {
        font-size: 54rpx;
        letter-spacing: 0;
        line-height: 74rpx;
        font-weight: 500;
      }
    }

    .sangname {
      font-size: 16px;
      color: #111;
      letter-spacing: 0;
      line-height: 26px;
      font-weight: 600;
      margin: 0 0 15rpx 0;
    }

    .foot {
      display: flex;
      font-size: 24rpx;
      justify-content: space-between;
    }

    .guig {
      padding: 20rpx;
      box-sizing: border-box;
      height: 45rpx;
      background: #fff0ef;
      border-radius: 18rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      display: flex;
      align-items: center;
      color: #ff442f;
      border-top: 1px solid #f5f5f5;
    }

    .way {
      font-size: 28rpx;

      .text {
        font-weight: bold;
        display: inline-block;
        margin: 0 10rpx 0 0;
      }
    }

    .specifications {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .xiangq {
      display: flex;
      align-items: center;
      justify-content: center;

      .I {
        width: 50px;
        height: 0.5px;
        background: #ddd;
      }
    }
  }

  .company {
    margin: 20rpx 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
    padding: 12px 10px;
    background-image: linear-gradient(
      90deg,
      rgba(187, 215, 255, 0.4),
      rgba(89, 130, 255, 0.3)
    );
    border-radius: 20rpx;

    .header {
      display: flex;
      align-items: center;
      margin: 0 0 20rpx 0;
    }

    .cont {
      display: flex;
    }

    .left {
      width: 108rpx;
      height: 108rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .right {
      .title {
        font-size: 30rpx;
        color: #111;
        text-align: left;
        line-height: 40rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 30rpx;
      }
    }
  }

  .button {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    .btn {
      font-size: 32rpx;
      text-align: center;
      line-height: 32rpx;
      display: block;
      padding: 24rpx 0;
      background: #28a745;
      border-radius: 80rpx;
      color: #fff;
      width: 320rpx;
    }

    .cal {
      background-color: #f39147;
    }
  }

  .footer {
    // margin: 0 0 100rpx 0;
    margin-bottom: 150rpx;
  }
}
</style>